<template>
	<view class="content">
		<view class="transfer_search_wrap">
			<view class="transfer_search_box">
				<view class="transfer_search">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/search.png" mode="aspectFit"></image>
					<input type="text" @input="phonea" placeholder-style="font-size:30upx;" placeholder="请输入设备号或手机号" />
					
				</view>
				<!-- <view class="sreening" @click="chex">筛选</view> -->
			</view>
		</view>
		
		<view class="record_list" v-for="(item,index) in record_list" :key="index">
			<view class="record_item">
				<view class="record_item_top">
					<view class="card_name">拉卡拉</view>
					<view class="transfer_card_num" v-if="item.type==2">{{item.start_sn}}<text>({{item.num}}台)</text></view>
					<view class="transfer_card_num" v-if="item.type==1">{{item.device_sn}}<text>({{item.num}}台)</text></view>
					<view class="card_status" v-if="item.type == '1'" style="color: #1AAD19;">选择划拨</view>
					<view class="card_status1" v-if="item.type == '2'" style="color: #F5222D;">区间划拨</view>
				</view>
				<view class="record_item_bottom">
					<view class="transfer_name">{{item.nickname}}</view>
					<view class="transfer_phone">{{item.mobile}}</view>
					<view class="time">{{item.createtime_text}}</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<!-- <view class="bottom_con">到底啦，没有更多记录了~</view> -->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		data() {
			return {
				phone:'',
				
				loaded: false,
				loadingType: 'more',
				pageNum: 1,
				limit: 10,
				token:'',
				record_list:[
					
					// {
					// 	card_name:'洁牙卡1',
					// 	star_num:'010922',
					// 	end_num:'010999',
					// 	num:'77',
					// 	card_status:'已激活',
					// 	transfer_name:'罗三姐',
					// 	transfer_phone:'18729224356',
					// 	time:'2020-13:14 17:20:20'
					// },{
					// 	card_name:'洁牙卡1',
					// 	star_num:'010922',
					// 	end_num:'010999',
					// 	num:'77',
					// 	card_status:'未激活',
					// 	transfer_name:'罗三姐',
					// 	transfer_phone:'18729224356',
					// 	time:'2020-13:14 17:20:20'
					// },{
					// 	card_name:'洁牙卡1',
					// 	star_num:'010922',
					// 	end_num:'010999',
					// 	num:'77',
					// 	card_status:'已激活',
					// 	transfer_name:'罗三姐',
					// 	transfer_phone:'18729224356',
					// 	time:'2020-13:14 17:20:20'
					// }
				]
			}
		},
		onLoad(option) {
			this.token=option.token
		},
		onShow(){
			//分页获取划拨记录
			this.transferRecord()
		},
		onReachBottom() {
			this.transferRecord(1);
		},
		methods: {
			//分页获取划拨记录
			transferRecord(source){
				if (source == 1 && this.loadingType != 'more') {
					return;
				}
				if(source == 2 && this.loaded == 'noMore'){
					return;
				}
				this.loadingType = 'loading'	 
				//分页获取划拨记录
				let params={
						page:this.pageNum,
						limit:this.limit,
						mobile:this.phone,
						token:this.token
					};
				var url = '/api/usercenter/device/transferRecord'
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					// console.log('res',res);
					if (res.statusCode == 200 && res.data.code == 1) {
						this.loadingType = "more"
						if (!res.data.data) {
							this.loadingType = 'noMore';
						} else if (res.data.data.length < this.limit) {
							this.loadingType = 'noMore';
							if (res.data.data.length > 0) {
								this.record_list = this.record_list.concat(res.data.data);
							}
						} else if (res.data.data.length == this.limit) {
							if (res.data.data.length > 0) {
								this.record_list = this.record_list.concat(res.data.data);
							}
							this.pageNum = this.pageNum + 1;
						}
						//遍历
						for(var i = 0; i <= res.data.data.length; i++){
							var num = res.data.data[i].device_sn
							if(num){
								if(res.data.data[i].device_sn.indexOf(',')){
									var device = res.data.data[i].device_sn.split(',')[0];
									this.record_list[i].device_sn = device
								}
							}
						}
						
					} else if (res.statusCode == 200 && res.data.code == 401) {
						this.Unfold_data.showWindow(res.data.msg);
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			},
			
			//根据电话号码分页获取划拨记录
			phonea(e){
				if(e.detail.value.length==11){
					this.phone = e.detail.value
					this.pageNum = 1
					this.record_list = []
					this.transferRecord(2)
				}else if(e.detail.value==""){
					this.transfer_people = []
					this.pageNum = 1
					this.record_list = []
					this.transferRecord(2)
				}
	},
			
		}
	}
</script>

<style lang="scss">
page{
	width: 100%;
	height: 100%;
	background-color: #ededed;
}
.content{
	width: 100%;
	position: relative;
	padding-bottom: 100upx;
	.transfer_search_wrap{
		width: 90%;
		margin: 0 auto;
		padding: 20upx 0;
		.transfer_search_box{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.transfer_search{
				flex: 6;
				width: 100%;
				height: 70upx;
				background-color: #FFFFFF;
				border-radius: 35upx;
				padding: 0 30upx;
				display: flex;
				align-items: center;
				image{
					width: 50upx;
					height: 50upx;
				}
				input{
					padding-left: 20upx;
					font-size: 30upx;
				}
			}
			.sreening{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1a80da;
			}
		}
	}
	.record_list{
		width: 100%;
		height: 140upx;
		background-color: #FFFFFF;
		border-bottom: 2upx solid #ededed;
		display: flex;
		align-items: center;
		justify-content: center;
		.record_item{
			width: 90%;
			margin: 0 auto;
			.record_item_top{
				width: 100%;
				display: flex;
				align-items: center;
				padding-bottom: 20upx;
				.card_name{
					flex: 0.9;
				}
				.transfer_card_num{
					flex: 2;
					font-size: 28upx;
					text{
						font-size: 24upx;
						padding-left: 10upx;
						color: #7c7c7c;
					}
				}
			}
			.record_item_bottom{
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 24upx;
				color: #7c7c7c;
				.transfer_name{
					flex: 1;
				}
				.transfer_phone{
					flex: 1;
				}
				.time{
					flex: 2;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
	}
	.bottom_con{
		width: 100%;
		padding: 20upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #7c7c7c;
	}
}
</style>
